<template>
  <div class="menu-box">
    <div
      class="menu-item"
      v-for="(item, index) of searchData"
      :key="item.id"
      @click="choose(item)"
    >
      {{ item.text }}
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, ref, watch } from 'vue'
export default {
  name: 'Menu',
  props: ['data', 'searchValue'],
  setup(props, ctx) {
    const searchData = ref([])
    const choose = (item) => {
      ctx.emit('choose', item)
    }

    onMounted(() => {
      searchData.value = props.data
    })

    watch(
      () => props.searchValue,
      (value) => {
        searchData.value = filterSearchData(value)
      }
    )

    const filterSearchData = (value) => {
      return props.data.filter((item) => {
        return item.text.includes(value)
      })
    }

    return {
      choose,
      searchData,
    }
  },
}
</script>
<style scope>
.menu-box {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
  box-shadow: 0px 0px 10px #666;
  box-sizing: border-box;
  border: 1px solid #bbb;
  z-index: 2;
  opacity: 0;
  /* display: none; */
}

.menu-item {
  text-align: center;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #ccc;
}

.menu-box::-webkit-scrollbar {
  display: none;
}

.fade-in {
  animation: fadeIn 0.25s;
  animation-fill-mode: forwards;
}

.fade-out {
  animation: fadeOut 0.15s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
    height: 100px;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
    height: 100px;
  }

  100% {
    opacity: 0;
    height: 0px;
  }
}
</style>
